<template>
	<view class="index">
		<!-- contractStatus 0未签约1正常,3已过期 -->
		<!--usinfo里的 sighstatus=1是已签约, 0是未签约 -->
		<!-- 未签约 -->
		<view class="nosign-wrap" v-if="isFirst">
			<view class="title">资质信息</view>
			<view class="des">
				<image :src="qualifications" alt="" mode="widthFix" />
			</view>

			<view class="btn-box">
				<view class="btn" @click="$route('/pages/member/index')">申请签约</view>
				<view class="btn btn1" @click="signed">已是签约用户</view>
				<view class="btn btn1" @click=" $route({ url: '/pages/member/signRecord', params: { deptId: deptId, }, }) ">申请记录</view>
			</view>
		</view>

		<!-- 已签约 -->
		<view class="recovery" v-else>
			<view class="container">
				<view class="tip">当前手机号已签约</view>
				<view class="select">
				  <LSelect dataKey="deptName" dataValue="deptId" v-model="deptId" border="none" :localdata="signList" :clear="false" @change="deptChange">
				  </LSelect>
				</view>
				<view class="btn"  @click=" $route({ url: '/pages/member/signRecord', params: { deptId: deptId, }, }) ">申请记录</view>
				<view class="button-box">
					<!-- serviceType 1收油 2清掏 -->
					<view class="button button1" @click="toRouter('/pages/apply/index')"
						v-if="signDetailsData.serviceType.includes('1')">
						<view>申请收油</view>
					</view>
					<view class="button button2" @click="toRouter('/pages/apply/clean')"
						v-if="signDetailsData.serviceType.includes('2')">
						<view>申请清掏</view>
					</view>
					 <!-- v-if="!signDetailsData.parentId" -->
					<view class="button button3" @click="show1 = true" v-if="!signDetailsData.parentId">
						<view>申请续约</view>
					</view>
				</view>

				<view class="imgs">
					<image src="/static/index/banner.png" mode="widthFix"></image>
				</view>

			</view>

		</view>

		<!-- <button open-type="contact" class="service"> -->
		<button @click="makePhoneCall" class="service">
			<image src="@/static/icon/icon_service.png" mode="widthFix"></image>
		</button>
		<!-- <view class="service">
		<image src="@/static/icon/icon_service.png" mode="widthFix"></image>
	</view> -->
		<!-- !this.signDetailsData.parentId -->
		<u-modal :show="show" title="提示" confirmText="申请续约" :showConfirmButton="!signDetailsData.parentId"
			:showCancelButton="true" cancelText="返回" confirmColor="#138E57" width="310"
			@confirm="show = false; show1 = true" @cancel="show = false">
			<view class="slot-content">
				<!-- <rich-text :nodes="content1"></rich-text>			 -->
				<view style="color:#858585;text-align:center;">您的合同有效期已过，请续约后再申请</view><br>
				<view style="color:#000;text-align:center;">合同有效期：{{ signDetailsData.contractValidity }}</view>
			</view>
		</u-modal>

		<u-modal :show="show1" title="提示" confirmText="确认申请" :showCancelButton="true" cancelText="返回" confirmColor="#138E57"
			width="310" @confirm="applySign" @cancel="show1 = false">
			<view class="slot-content">
				<view style="color:#858585;text-align:center;">确认提交续约申请，提交申请后<br>请等待工作人员线下联系</view>
				<view style="color:#000;text-align:center;">合同有效期：{{ signDetailsData.contractValidity }}</view>
			</view>

		</u-modal>

		<u-modal :show="show2" title="提示" confirmText="确认" confirmColor="#138E57" width="310" @confirm="show2 = false">
			<view class="slot-content">
				<view style="color:#858585;text-align:center;">您已提交过申请，<br>请等待工作人员线下联系</view>
				<view style="color:#000;text-align:center;">合同有效期：{{ signDetailsData.contractValidity }}</view>
			</view>
		</u-modal>

		<u-modal :show="show3" title="提示" confirmText="确认" @cancel="show3 = false" :showCancelButton="true" cancelText="取消"
			confirmColor="#138E57" width="310" @confirm="member">
			<view class="slot-content">
				<view style="color:#000;text-align:center;">您还未签约，请先申请签约</view>
			</view>
		</u-modal>
		
		<u-modal :show="orderShow" title="提示" confirmText="确认" @cancel="orderShow = false" :showCancelButton="true" cancelText="取消"
			confirmColor="#138E57" width="310" @confirm="application()">
			<view class="slot-content">
				<view style="color:#000;text-align:center;">当前单位收运订单未处理，是否确认申请。</view>
			</view>
		</u-modal>

	</view>
</template>

<script>
import { getToken } from "@/utils/auth";
import Title from "@/components/Title/index.vue";
import { signDetails, app_qualifications, applySign, InSignUnitList,isCommitOrder ,getPlatformConfig} from "@/api";

import LSelect from "@/components/LSelect";
export default {
	components: {
		Title,
		LSelect
	},
	data() {
		return {
			isFirst:true,
			qualifications: null,
			signDetailsData: {
				serviceType: '',
				contractStatus: '0'
			},
			show: false,
			show1: false,
			show2: false,
			show3: false,
			orderShow:false,
			
			signList:[],//已签约的单位
			deptId:'',
			platformPhone:'',
			pageUrl:''
		};
	},
	computed: {
		isLogin() {
			return this.$store.state.isLogin;
		},
		userInfo() {
			return this.$store.state.userInfo;
		},
	},
	onShow() {
		if (!getToken()) {
			uni.reLaunch({
				url: '/pages/login/index'
			})
		} else {
			//获取平台电话
			getPlatformConfig({
				configKey: 'platform_phone'
			}).then((res) => {
				this.platformPhone = res.rows[0].configValue
			})
			this.$store.dispatch("userInfo").then(res => {
				console.log(res)
				// if (res.deptId) {
				// 	this.signDetails()
				// }
				this.app_qualifications()
			})
		}
	},
	methods: {
		makePhoneCall() {
		  uni.makePhoneCall({
			phoneNumber: this.platformPhone, // 需要拨打的电话号码
			success() {
			  console.log('拨打成功');
			},
			fail(err) {
			  console.error('拨打失败', err);
			 //  uni.showToast({
				// title: '拨打失败，请检查号码！',
				// icon: 'none'
			 //  });
			}
		  });
		},
		// 资质详情
		app_qualifications() {
			app_qualifications().then(res => {
				this.qualifications = res.data
			})
		},
		// 签约 
		member() {
			this.$route('/pages/member/index')
			this.show3 = false
		},
		// 已签约
		signed() {
			InSignUnitList().then(res => {
				// console.log(res)
				if (res.data.length) {
					this.signList = res.data
					this.isFirst = false
					if(uni.getStorageSync('deptId')){
						this.deptId = uni.getStorageSync('deptId')
					}else{
						this.deptId = res.data[0].deptId
						uni.setStorageSync('deptId', res.data[0].deptId);
					}
					this.signDetails(this.deptId)
				} else {
					this.show3 = true
				}
			})
		},
		// 筛选排放单位
		deptChange(e){
			console.log('筛选排放单位',e);
			if(e != this.deptId){
				this.deptId = e
				uni.setStorageSync('deptId', e);
				this.signDetails(e)
				console.log(uni.getStorageSync('deptId'));
			}
		},
		
		// 签约信息
		signDetails(deptId) {
			signDetails({
				deptId:deptId
			}).then(res => {
				this.signDetailsData = res.data
				if (this.signDetailsData.contractStatus == '0') {
					this.app_qualifications()
				}
			})
		},
		toRouter(tourl) {
			// contractValidity 到期时间
			//到期时间
			var startTime = this.signDetailsData.contractValidity
			//当前时间
			var currentDate = new Date();
			var currentDateStr = currentDate.getFullYear() + '-' + (currentDate.getMonth() + 1) + '-' + currentDate.getDate();
			this.pageUrl = tourl
			if (new Date(currentDateStr).getTime() > new Date(startTime).getTime()) {
				this.show = true
			} else {
				isCommitOrder({
					userSignId:this.deptId
				}).then(res => {
					if(res.data){
						this.orderShow = res.data
					}else{
						this.$route({
							url: tourl,
							params: { deptId: this.deptId },
						})
					}
				})
				
				// if(tourl == '/pages/apply/index'){
				// 	isCommitOrder({
				// 		userSignId:this.deptId
				// 	}).then(res => {
				// 		if(res.data){
				// 			this.orderShow = res.data
				// 		}else{
				// 			this.$route({
				// 				url: tourl,
				// 				params: { deptId: this.deptId },
				// 			})
				// 		}
				// 	})
				// }else{
				// 	this.$route({
				// 		url: tourl,
				// 		params: { deptId: this.deptId },
				// 	})
				// }
				
			}
			// <!-- contractStatus 0未签约1正常,3已过期 -->
		},
		// 申请收运
		application(tourl) {
			this.$route({
				url: this.pageUrl,
				params: { deptId: this.deptId },
			})
			this.orderShow = false
		},
		// 续约
		applySign() {
			applySign({
				deptId:this.deptId,
				openid: this.signDetailsData.openid,
				contactPhone: this.signDetailsData.contactPhone,
				contact: this.signDetailsData.contact,
				isSign:1
				// isSign:this.userInfo.signStatus
			}).then(res => {
				// 已提交续约
				this.show1 = false
				if (res.msg == '用户申请签约次数用完' || res.msg == '相同的联系方式一天只能提交一次') {
					this.show2 = true
				} else {
					uni.$u.toast('提交成功')
				}
			})
		},
	},
};
</script>

<style lang="less" scoped>
.index {
	padding: 28rpx 30rpx;
	position: relative;
	min-height: 100vh;
	box-sizing: border-box;

	background-repeat: no-repeat;
	background-size: 100%;
	background-color: #ffffff;
	background-image: url("@/static/recovery-bg.png");


	.service {
		width: 104rpx;
		height: 104rpx;
		background: linear-gradient(83deg, #48B453 0%, #2C9F79 100%);
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		right: 60rpx;
		bottom: 30rpx;
		z-index: 3;

		image {
			width: 52rpx;
		}
	}

	.nosign-wrap {
		position: relative;
		z-index: 2;
		padding: 0 30rpx;
		padding-bottom: 180rpx;
		box-sizing: border-box;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: #000000;
			text-align: center;
		}

		.des {
			height: 65vh;
			overflow-y: scroll;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #000000;
			line-height: 48rpx;
			margin-top: 30rpx;
			text-align: justify;
		}

		.btn-box {
			width: 100%;
			position: absolute;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 48%);
			bottom: 0;
			left: 0;
			padding-top: 150rpx;

			.btn {
				width: 610rpx;
				height: 96rpx;
				background: linear-gradient(83deg, #48B453 0%, #2C9F79 100%);
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 96rpx;
				text-align: center;
				margin: 0 auto;
			}

			.btn1 {
				background: #F7F7F7;
				border: 2rpx solid #138E57;
				margin-top: 30rpx;
				color: #138E57;
			}
		}

	}

	.recovery {
		width: 100%;
		padding-top: 120rpx;

		.container {
			display: flex;
			flex-direction: column;
			align-items: center;
			.btn {
				width: 295px;
				height: 35px;
				background: #fff;
				border-radius: 20rpx;
				margin-bottom: 30rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				font-size: 14px;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #F7F7F7;
				border: 2rpx solid #138E57;
				color: #138E57;
			}
			.tip {
				font-size: 44rpx;
				font-weight: 600;
				color: #000000;
				margin-bottom: 60rpx;
			}
			.select{
				width: 295px;
				background: #fff;
				border-radius: 20rpx;
				margin-bottom: 30rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				border: 1rpx solid #eee;
			}
			.button1 {
				background-image: url("@/static/index/bg_method1.png");
			}

			.button2 {
				background-image: url("@/static/index/bg_method2.png");
			}

			.button3 {
				background-image: url("@/static/index/bg_method3.png");
			}

			.button {
				width: 590rpx;
				height: 160rpx;
				padding-left: 130rpx;
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				background-size: 100%;
				box-sizing: border-box;

				view {
					font-size: 36rpx;
					font-weight: 500;
					color: #ffffff;
				}
			}

			.imgs {
				width: 590rpx;
				margin-top: 70rpx;

				image {
					width: 100%;
				}
			}
		}
	}

}
</style>
